from dash import html
import dash_bootstrap_components as dbc

STYLE_1 = {'color': 'rgb(13, 103, 180)'}
STYLE_2 = {'color': 'rgb(255, 153, 51)'}
STYLE_3 = {'color': 'rgb(255, 153, 51)', "margin-left": "1rem"}

dash_bootstrap_layout_html = html.Div(
    [
        html.P(html.Strong('Dash Bootstrap Layout用于布局Dash应用程序的组件, 包括包装容器和一个功能强大、响应迅速的网格系统。', 
                           style=STYLE_1)),
        html.Hr(),
        html.P('Bootstrap中的布局是使用网格系统控制的。'
               'Bootstrap网格有12列和6个响应层(允许您在不同的屏幕尺寸上指定不同的行为)。'
               '列的宽度可以根据它应该跨越12个网格列中的多少来指定, '
               '也可以允许列扩展或缩小以适应它们的内容或行中的可用空间。', 
               style=STYLE_2),
        html.P('在dash-bootstrap-components中有三个主要的布局组件: Container、Row和Col。',
               style=STYLE_2),
        html.P('1.Container可以用于居中和水平填充应用程序的内容。',
               style=STYLE_3),
        html.P('2.Row是列的包装器。你的应用的布局应该构建为一系列的行和列。',
                style=STYLE_3),
        html.P('3.Col应该始终作为Row的直接子组件使用, 它是内容的包装器, 确保它占用了正确的水平空间。',
                style=STYLE_3),
        html.P('为了获得最好的效果，在构建布局时要确保遵循以下两条规则: ', 
               style=STYLE_2),
        html.P('1.只在Container内使用Row和Col, 用一个Container包装整个应用程序的内容就可以了, 如果不希望使用默认情况下Container添加的边距, 则设置fluid=True。',
                style=STYLE_3),
        html.P('2.任何Row组件的直接子组件都应该是Col组件。内容应该放在Col组件中。',
                style=STYLE_3),
        html.P('下面我们来使用代码来体验一下Dash的布局如何编写',
                style=STYLE_3),
        html.Hr(),
        dbc.Container(
            [
                dbc.Row(dbc.Col('第一行的布局'), style={'background-color': 'lightgreen'}),
                dbc.Row(
                    [
                        dbc.Col('第二行第一列的布局', width=6, style={'background-color': 'lightblue'}),
                        dbc.Col('第二行第二列的布局', width=6, style={'background-color': 'lightskyblue'}),
                    ],
                ),
                dbc.Row(
                    [
                        dbc.Col('第三行第一列的布局', width=2, style={'background-color': 'HotPink'}),
                        dbc.Col('第三行第二列的布局', width=3, style={'background-color': 'IndianRed'}),
                        dbc.Col('第三行第三列的布局', width=7, style={'background-color': 'MistyRose'}),
                    ],
                ),
                dbc.Row(
                    [
                        dbc.Col('第四行第一列的布局', width=2, style={'background-color': 'lightblue'}),
                        dbc.Col('第四行第二列的布局', width=10, style={'background-color': 'lightskyblue'}),                    
                    ],
                ),
                dbc.Row(
                    [
                        dbc.Col('第五行第一列的布局', width=10, style={'background-color': 'LightSteelBlue'}),
                        dbc.Col('第五行第二列的布局', width=2, style={'background-color': 'lightgreen'}),
                    ],
                ),
            ],
            fluid=True,
        ),
    ]
)

